import React from 'react';
import {Flex, List, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import Layout from '../../components/layout/layout';
import  './index.less';

const Item = List.Item;
const Brief = Item.Brief;

class BindBank extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      bankInfo: {}
    }
  }

  componentDidMount() {

  }

  render() {
    // 空页面
    const PageNull = <Card className={'bankNull'}>
      <Card.Body style={{border: "none"}}>
        <div
          className={'bankAdd'}
          onClick={() => {
            this.props.history.push("/bankAdd")
          }}>
          <i className={'b-add'}></i>
          <div>添加银行卡</div>
        </div>
      </Card.Body>
    </Card>;

    // 银行卡
    const PageBank = <Card className={'card'}>
      <Card.Body style={{border: "none"}}>
        <div className={'bInfo'}>
          <div className={'iTop'}>
            <div className={'iIcon'}>
              <img src="https://r.youxuanqb.com/mzuploads/bank/201801/999b7b21c6c94ccbb70f94e02aaf8b9f.png"/>
            </div>
            <div className={'iName'}>招商银行</div>
          </div>
          <div className={'iBot'}>**** **** **** 7536</div>
        </div>
      </Card.Body>
    </Card>

    return (
      <Layout className={'page-bank'}>
        <div className={'b-body'}>
          <div className={'bank'}>
            <WingBlank size="lg">
              <WhiteSpace size="lg"/>
              {PageNull}
              <WhiteSpace size="sm"/>
              <WhiteSpace size="lg"/>
              {PageBank}
              <WhiteSpace size="sm"/>
            </WingBlank>
            <p className={'bTips'}>温馨提示：此卡将作为您借款及还款使用，请妥善保管。</p>
          </div>
          <footer className={'footer'}>
            如遇到相关问题，请拨打400热线进行咨询
          </footer>
        </div>
      </Layout>
    );
  }

}

BindBank.propTypes = {};

export default BindBank;
